import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Breadcrumb, Space, Col, Row, Checkbox, DatePicker, Table } from 'antd';
import { useNavigate } from 'react-router-dom';
import service from '../../../../api';
import type { ColumnsType } from 'antd/es/table';
import './Adddiscount.scss'
import { useSearchParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
interface DataType {
    key: React.Key;
    goodname: string;
    original: number;
    stock: number;
    originalprice: number;
    discount: number;
    discountprice: number;
    classification: [];
    img: string
}


const { RangePicker } = DatePicker;
const { TextArea } = Input;
function Adddiscount(props: any) {
    // var [text, setText] = useState([])
    let [params, setParams] = useSearchParams();
    let [id, setid] = useState();

    var info = async () => {
        var id = params.get('id')

        // var res3 = await service.marketing.conpon_info({ id })
        // // console.log(res3);
        // setText(res3.data)
    }
    useEffect(() => {
        info()
    }, [])
    var navigate = useNavigate()
    //返回
    const back = () => {
        navigate('/index/coupon')
    }
    //提交
    var onFinish = async (formvalues: any) => {
        if (id) {
            // alert(222)
        } else {
            // alert(111)
            const time = (formvalues.time[0].$y) + "/" + (formvalues.time[0].$M + 1) + "/" + (formvalues.time[0].$D) + " - " + (formvalues.time[1].$y) + "/" + (formvalues.time[1].$M + 1) + "/" + (formvalues.time[1].$D)
            var res = await service.marketing.conpon_add({ name: formvalues.name, coupon: formvalues.coupon, decrement: formvalues.decrement, states: formvalues.states, time: time, range: formvalues.range, channel: formvalues.channel })            // console.log(text);
        }


        navigate('/index/coupon')
    }
    //表格

    const list = async () => {
        var res = await service.discount.goods_list()
        // console.log(res.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data)
    }
    useEffect(() => {
        list()
    }, [])

    var [tableData, setTableData] = useState<DataType[]>([])

    const columns: ColumnsType<DataType> = [
        {
            title: '活动名称',
            dataIndex: 'name',
            render: (_, record) =>
                <div>
                    <img src={record.img} alt="" />
                    <p>{record.goodname}</p>
                </div>

        },
        {
            title: '原价',
            dataIndex: 'originalprice',
            render: (_, record) => <p>{record.originalprice}</p>

        },
        {
            title: '库存',
            dataIndex: 'stock',
            render: (_, record) => <p>{record.stock}</p>
        },
        {
            title: '秒杀价',
            dataIndex: 'discountprice',
            render: (_, record) => <p>{record.discountprice}</p>
        },
        {
            title: '操作',
            render: (_, record) => (
                <Space size="middle">
                    <Button className='button' onClick={() => { edit(record) }} >编辑</Button>

                    <Button className='button' onClick={() => { del(record) }} >删除</Button>
                    <Button className='button' onClick={() => { xiu(record) }}>停用</Button>
                </Space>
            ),
        },
    ];
    //删除
    const del = async (record: any) => {
        var res1 = await service.discount.discount_del({ id: record.id, })
        console.log(res1);
        list()
    }
    //编辑
    const edit = (record: any) => {
        var id = record.id
        // console.log(id);
        navigate('/index/addcoupon');
        navigate({ pathname: '/detail', search: id });
    }
    const xiu = async (record: any) => {
        // alert(111)
        if (record.states == '未开始') {
            var res1 = await service.discount.discount_xiu({ id: record.id, states: '进行中' })
            // console.log(res1);
            // list()
        }
        else if (record.states == '进行中') {
            var res1 = await service.discount.discount_xiu({ id: record.id, states: '已结束' })
            // console.log(res1);
            // list()
        }
        else if (record.states == '已结束') {
            var res1 = await service.discount.discount_xiu({ id: record.id, states: '未开始' })
            // console.log(res1);
        }
        list()

    }



    return (
        <div className='adddiscount'>
            <div className="head">
                <div className="top">
                    <div className="bread">
                        <Breadcrumb>
                            <Breadcrumb.Item>营销</Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">折扣活动</a>
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    {id ? <h2>编辑折扣活动</h2> : <h2>新建折扣活动</h2>}

                </div>

            </div>
            <div className='form'>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 1000 }}
                    onFinish={onFinish}

                >
                    <Form.Item name='name' label="活动名称"  >
                        <Input style={{ width: 300 }} />
                    </Form.Item>
                    <Form.Item name='time' label="活动日期">
                        <RangePicker />
                    </Form.Item>
                    <Form.Item name="channel" label="促销抹零">
                        <Checkbox.Group style={{ width: '100%' }}
                        //onChange={onChange}
                        >
                            <Row>
                                <Col span={40}>
                                    <Checkbox value="small"> 抹零</Checkbox>
                                </Col>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item name="channel" label="商品限购">
                        <Checkbox.Group style={{ width: '100%' }}
                        //onChange={onChange}
                        >
                            <Row>
                                <Col span={40}>
                                    <Checkbox value="restrictions"> 限购</Checkbox>
                                </Col>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item name="channel" label="原价">
                        <Checkbox.Group style={{ width: '100%' }}
                        //onChange={onChange}
                        >
                            <Row>
                                <Col span={40}>
                                    <Checkbox value="small"> 原价</Checkbox>
                                </Col>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item name="states" label="状态">
                        <Select
                            style={{ marginRight: 30, width: 300 }}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '未开始', label: '未开始' },
                                { value: '进行中', label: '进行中' },
                                { value: '已结束', label: '已结束' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="states" label="表格">


                        <Table columns={columns} dataSource={tableData} />


                    </Form.Item>
                    <Form.Item label="操作">
                        <Button htmlType="submit" style={{ marginRight: 30 }}>
                            提交
                        </Button>
                        <Button htmlType="button"
                            onClick={back}
                        >
                            返回
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Adddiscount;